<template>
  <div class="workFlowDetail">
    <div style="margin-bottom: 10px">
      <jc-button
        :btn-arr="['remove', 'reload', 'option', 'pass', 'sub', 'save', 'list']"
        :disab-arr="['close', 'cancel', 'toExcel', 'using', 'com1', 'com2', 'freeze']"
        :fbillno="production.fbillNo"
        :list="'/workOrder'"
        @save="save"
        @refresh="workDetail"
        @submit="submit(1)"
        @noSubmit="submit(2)"
        @audit="audit(1)"
        @noAudit="audit(2)"
        @del="delPublic"
      />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleOther">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="production" label-width="100px" size="mini">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="production.stateColor">{{ production.fdocumentstatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.orderDate')">
            <el-date-picker
              v-model.trim="production.fdate"
              type="date"
              value-format="yyyy-MM-dd"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item :label="$t('market.orderNum')">
            <el-input v-model.trim="production.fbillNo" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.salOrder')">
            <el-input v-model.trim="production.fbilltype" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.craftnumber')">
            <el-input v-model.trim="production.fcraftnumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fcraftname')">
            <el-input v-model.trim="production.fcraftname" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.srcbillno')">
            <el-input v-model.trim="production.fsrcbillno" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.moseq')">
            <el-input v-model.trim="production.fmoseq" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.srcmoqty')">
            <el-input v-model.trim="production.fmoqty" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmodel')">
            <el-input v-model.trim="production.fmodel" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')">
            <el-input v-model.trim="production.fnumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')">
            <el-input v-model.trim="production.fname" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.funit')">
            <el-input v-model.trim="production.funit" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fspecificaTion')">
            <el-input v-model.trim="production.fspecificaTion" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdescripTion')">
            <el-input v-model.trim="production.fdescripTion" style="width: 400px;" disabled />
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" disabled>{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" :disabled="isDisabled" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
          <el-button size="mini" :disabled="isDisabled" @click="batchFill">{{ $t('btn.batchFill') }}{{ $t('shop.number') }}<!--批量填充--></el-button>
          <el-button size="mini" :disabled="isDisabled" style="margin-bottom: 5px;" @click="copyHang">{{ $t('btn.copyHang') }}<!--复制行--></el-button>
          <el-button size="mini" type="success" @click="dialogWorker=true">批量报工</el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeard"
          :table-height="tableHeight"
          :get-summaries="getSummaries"
          show-summary
          table-selection
          @cellClick="cellClick"
          @rowClick="rowClick"
          @selectionChange="handleSelectAll"
        >
          <!--          报工数量-->
          <template v-slot:billSlot="col">
            <el-input-number
              v-model.trim="col.scope.row.fworkqtyview"
              size="mini"
              :min="0"
              :disabled="isDisabled"
              @change="handelPrice(col.scope.$index)"
            />
          </template>
          <!--          报工人-->
          <template v-slot:btnStates="col">
            <!--            <el-input v-model.trim="col.scope.row.fworker" size="mini" :disabled="isDisabled">-->
            <!--              <i-->
            <!--                slot="suffix"-->
            <!--                class="el-input__icon el-icon-search"-->
            <!--                @click="handleWorker(col.scope.$index, col.scope.row.fgroupid)"-->
            <!--              />-->
            <!--            </el-input>-->
            <el-select v-model="col.scope.row.fworker" size="mini" filterable :disabled="isDisabled">
              <el-option
                v-for="item in tableData2"
                :key="item.id"
                :label="item.fjobnumber + '-' +item.fname"
                :value="item.fname"
              />
            </el-select>
          </template>
          <!--          备注-->
          <template v-slot:btnState="col">
            <el-input v-model.trim="col.scope.row.fremark" size="mini" :disabled="isDisabled" />
          </template>
        </jc-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('market.other')" name="log">
        <jc-marker
          ref="log"
          :fnumber="production.fbillNo"
          other-height="64vh"
          :other-url-object="otherUrlObject"
        />
      </el-tab-pane>
    </el-tabs>
    <worker v-if="isGroupVis" :groupid="fgroupid" @confirm="confirms" />
    <el-dialog
      title="批量报工"
      model
      :visible.sync="dialogWorker"
      :close-on-click-modal="false"
      width="500px"
      top="5vh"
      center
    >
      <div>
        报工人：
        <el-select v-model="fworker" filterable>
          <el-option
            v-for="item in tableData2"
            :key="item.id"
            :label="item.fjobnumber + '-' +item.fname"
            :value="item.fname"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogWorker=false">取 消</el-button>
        <el-button type="primary" @click="confirmUp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  workReportSubmit,
  updateWorkReport,
  queryWorkReportDetails,
  workReportAudit,
  workReportUnAudit,
  workReportAuSubmit,
  workReportDelete
} from '@/api/production/process'
import jcMarker from '@/components/marker'
import jcButton from '@/components/Button'
import { toMxBmina } from '@/components/ToMxamineState'
import jumpMateriel from '@/components/JumpMateriel'
import { queryReporterPersions } from '@/api/basicManagement/userslist'

export default {
  components: {
    jcMarker,
    jcButton,
    worker: () => import('@/views/production/process/workOrderDetail/worker')
  },
  mixins: [jumpMateriel],
  data() {
    return {
      fworker: '',
      fgroupid: '',
      activeName: 'first',
      production: {},
      tableData2: [],
      tableData: [],
      tableHeard: [
        { label: this.$t('shop.numIndex'), prop: 'ordinal', width: 60 },
        { label: this.$t('market.tranches'), prop: 'fgroupname', minWidth: '120px' },
        { label: this.$t('market.processname'), prop: 'fprocessnumber', minWidth: '120px' },
        { label: this.$t('market.processnumber'), prop: 'fprocessname', minWidth: '120px' },
        { label: this.$t('market.fqty'), prop: 'fqty', minWidth: '120px' },
        { label: this.$t('market.fprice'), prop: 'workprice', minWidth: '120px' },
        { label: this.$t('market.multiple'), prop: 'fnum', minWidth: '120px' },
        { label: this.$t('market.huiz'), prop: 'fprice', minWidth: '120px' },
        { label: this.$t('market.enableworkqty'), prop: 'fenableworkqty', minWidth: '80px' },
        { label: this.$t('market.workqty'), type: 'bill', prop: 'fworkqtyview', minWidth: '120px' },
        { label: this.$t('market.workAmount'), prop: 'fsumprice', minWidth: '120px' },
        { label: this.$t('market.worker'), type: 'states', prop: 'fworker', minWidth: '120px' },
        { label: this.$t('market.note'), type: 'state', prop: 'fremark', minWidth: '120px' }
      ],
      isDisabled: false,
      dialogWorker: false,
      isGroupVis: false,
      delFentrys: [],
      indexSelf: 0,
      tableHeight: '67vh',
      otherUrlObject: {}
    }
  },
  created() {
    this.workDetail()
    this.staffList()
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 330px)' : '72vh'
  },
  methods: {
    // 监听报工数量
    handelPrice(index) {
      // 报工金额 = 倍数*单价*报工数量
      const item = this.tableData[index]
      item.fsumprice = (item.workprice * item.fworkqtyview).toFixed(2)
    },
    // 修改
    save() {
      this.iswarker = false
      this.tableData.forEach(res => {
        if (!res.fworker) {
          this.iswarker = true
        }
      })
      if (this.iswarker) {
        this.$confirm('请输入报工人！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.production.details = this.tableData
      updateWorkReport({ ...this.production }).then(res => {
        if (res.code === 0) {
          this.workDetail()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    workDetail() {
      queryWorkReportDetails({ fid: this.$route.params.id }).then(res => {
        if (res.code === 0) {
          this.production = toMxBmina(res.data)
          this.isDisabled = this.production.fdocumentstatus === this.$t('market.state1') || this.production.fdocumentstatus === this.$t('market.state2')
          this.otherUrlObject = res.data
          this.tableData = res.data.details
          this.tableData.map(item => {
            item.workprice = (item.fprice / item.fnum).toFixed(2)
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 多选
    handleSelectAll(val) {
      this.indexArr = []
      val.forEach(res => {
        this.indexArr.push(res.index)
      })
    },
    // 批改
    confirmUp() {
      this.tableData.map((item, index) => {
        if (this.indexArr.includes(index)) {
          item.fworker = this.fworker
        }
      })
      this.dialogWorker = false
    },
    // 获取列表
    staffList() {
      this.fgroupArr = []
      this.tableData.forEach(res => {
        this.fgroupArr.push(res.fgroupid)
      })
      this.fgroupArr = Array.from(new Set(this.fgroupArr))
      const DATA = {
        pageNum: 1,
        pageSize: 1000,
        groupId: this.fgroupArr,
        search: [
          { fid: 7, field: 'fname', seach: this.fname }
        ]
      }
      queryReporterPersions(DATA).then(res => {
        if (res.code === 0) {
          this.tableData2 = res.data.array
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 公共函数
    toExamineFun(api) {
      const DATA = { Numbers: [this.production.fbillNo] }
      api(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.workDetail()
        this.innerHTM = ''
        res.data.forEach(res => {
          this.innerHTM += '<div>' + res + '</div>'
        })
        this.$notify.warning({
          title: '提示',
          message: this.innerHTM,
          duration: 3000, offset: 50,
          dangerouslyUseHTMLString: true
        })
      })
    },
    // 审批通过
    async audit(ev) {
      const api = ev === 1 ? workReportAudit : workReportUnAudit
      this.toExamineFun(api)
    },
    // 提交、反提交
    async submit(ev) {
      this.iswarker = false
      this.tableData.forEach(res => {
        if (!res.fworker) {
          this.iswarker = true
        }
      })
      if (this.iswarker && ev === 1) {
        this.$confirm('请选择报工人！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      const api = ev === 1 ? workReportSubmit : workReportAuSubmit
      this.toExamineFun(api)
    },
    // 删除
    delPublic() {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const DATA = { Numbers: [this.production.fbillNo] }
        workReportDelete(DATA).then(res => {
          if (res.code !== 0) {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
            return
          }
          this.innerHTM = ''
          res.data.forEach(res => {
            this.innerHTM += '<div>' + res + '</div>'
          })
          this.$notify.warning({
            title: '提示',
            message: this.innerHTM,
            duration: 3000, offset: 50,
            dangerouslyUseHTMLString: true
          })
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.replace({ path: '/workOrder' })
        })
      })
    },
    // 报工人
    handleWorker(index, id) {
      this.indexSelf = index
      this.fgroupid = id
      this.isGroupVis = true
    }, // 报工人
    confirms(ev) {
      if (ev?.fname) {
        this.tableData[this.indexSelf].fworker = ev.fname
      }
      this.isGroupVis = false
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    copyHang() {
      const item = this.tableData[this.indexSelf]
      this.tableData.splice(this.indexSelf + 1, 0, { ...item, fentryid: 0, fworkqtyview: 0 })
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    },
    handleOther(tab) {
      if (tab.name === 'log') {
        this.$refs.log.otherlog()
      }
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      const item = this.tableData[this.indexArr[0]].fworkqtyview
      this.tableData.map((res, index) => {
        if (this.indexArr.includes(index)) {
          res.fworkqtyview = item
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.workFlowDetail {
  @include listBom;
  padding: 10px;
  background: #FFFFFF;
  min-height: 89vh;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 30px;
      width: 275px;
      margin-bottom: 5px;

      .btnType {
        margin-right: 5px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
